import React, { PureComponent } from 'react'
import { setTitle, scale, tooltip, mapLineStyle, mapEffectStyle, baseTextStyle, colors } from '../chart/util/common'
import Box from './box'

class TemperImg extends PureComponent {

    constructor () {
        super()
        this.state = {
            scale: 1,
            len: 10,
            hover: false
        }
    }

    componentDidMount () {
        const {src, size} = this.props
        const {clientWidth, clientHeight} = this.refs.svg
        this.setState({
            scale: clientWidth / size[0] / scale,
        })
    }

    handMouseEnter = () => {
        this.setState({
            hover: true
        })
    }
    handMouseLeave = () => {
        this.setState({
            hover: false
        })
    }

    getStyle = (pos) => {
        const {size} = this.props
        const style = {}
        if (this.state.hover) {
            style.transform = `scale(2) translate(-${pos[0] * size[0] / 2}px,-${pos[1] * size[1] / 2}px)`
        }
        console.log(style)
        return style
    }

    render () {
        const {src, size, device = []} = this.props
        return (
            <svg ref='svg'
                 viewBox={`0 0 ${size.join(' ')}`}
                 preserveAspectRatio="xMidYMin">
                {/*layout*/}
                <image x="0" y="0" width={size[0]} height={size[1]}
                       xlinkHref={src}/>
                {/*温湿度设备*/}
                {device.map((d, i) => <Box d={d} key={`temper-img-${i}`} {...this.props} boxScale={this.state.scale}/>)}
            </svg>
        )
    }

}

export default TemperImg